<template>
	<view class="call-harmony-page">
		<text class="txt">鸿蒙设备id:</text>
		<text class="txt">{{udid}}</text>
		<button class="btn" @click="getHarmonyUdid">调用鸿蒙原生获取设备标识</button>
		
		<button class="btn" @click="getHarmonyUdidByThird">调用鸿蒙三方库@pura/harmony-utils获取设备标识</button>
	
		<view>
		
			<view>
				har包内容: {{ text }}
			</view>
		
			<button @click="getHarMessage">获取鸿蒙har包</button>
		</view>
		<view class="container">
			<view>鸿蒙UI组件</view>
			<view class="map-container">
				<embed class="native-map" tag="map" :options='options' @markertap='onMarkerTap'></embed>
			</view>
		</view>
	
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { getUdid, getUdidSync, InputOptions, OutApiResult} from '@/uni_modules/fcl-getudid'
	import { getHMHarMessage } from '@/uni_modules/hm-har'
	import "@/uni_modules/hm-map-ui";
	
	const udid = ref('')
	
	const getHarmonyUdid = () => {
		let opt:InputOptions= {
			paramNum: 123,
			success: (res: OutApiResult) => {
				udid.value = res.udid
			},
			fail: (e)=>{
				console.log(e.errCode)
			}
		};

		
		getUdid(opt)
		
	}
	
	
	const getHarmonyUdidByThird = () => {

		udid.value = getUdidSync(123).udid
	}
	
	const text = ref('')
	const options = ref({
		latitude: 22.5431,
		longitude: 114.0579,
		scale: 12,
		circles: [
			{
				latitude: 22.5431,
				longitude: 114.0579,
				color: 0xffff0000,
				fillColor: 0xff00ffff,
				radius: 80,
				strokeWidth: 10,
			},
		],
		markers: [
			{
				latitude: 22.5431,
				longitude: 114.0579,
	
			},
	
		],
	})
	const getHarMessage = () => {
		text.value = getHMHarMessage()
	}
	const onMarkerTap = (e) => {
		console.log("onMarkerTap", e);
		uni.showToast({
			title: `点击了标记点 ${e.detail.markerId}`,
			icon: 'none'
		});
	}
	
	
</script>

<style lang="less" scoped>
	.call-harmony-page{
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding: 20px;
		align-items: center;
		justify-content: center;
		
		.txt,.btn {
			margin-top: 25px;
		}
	}
	
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		padding: 20px;
		box-sizing: border-box;
	}
	
	.map-container {
		width: 100%;
		height: 70%;
		margin-bottom: 20px;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}
	
	.native-map {
		width: 100%;
		height: 100%;
	}
</style>


